<template>
	<view>
		<view class="bg-pink padding-sm">

			<view>1 分享后,对方也可开门,开门将会开始订单.</view>
			<view>2 请不要分享给陌生人</view>
		</view>
		<view class="margin-sm">

			<view style="width: 100%;" class="maoboli padding-sm margin-top-xs radius ">


				<view v-if="dataShop!=null&&orderInfo!=null" class="">
					<view class="text-lg text-bold text-gray flex font-13 align-center">
						<view class="bg-pink round margin-right-xs " style="height: 24rpx;width: 24rpx;"></view>门店信息
					</view>
					<storeItem v-if="dataShop!=null" :data="dataShop"></storeItem>


				</view>


			</view>
			<view class="maoboli padding-sm margin-top-sm radius " v-if="orderInfo!=null">
				<view class="text-lg text-bold text-gray flex font-13 align-center">
					<view class="bg-pink round margin-right-xs " style="height: 24rpx;width: 24rpx;"></view>
					设备信息
				</view>
				<view class="margin-top-xs padding-xs">
					<view class="flex justify-center">
						<view style="display: flex;width: 100%;">
							<view style="width: 120rpx;">

								<image :src="orderInfo.sysShopDeviceModel.images.split(',')"
									style="width: 120rpx;height: 120rpx;border-radius: 8px;">
								</image>

								<!-- <view class="juzhong text-red text-sm ">
								{{orderInfo.price}}元
							</view> -->

							</view>
							<view class="margin-left-sm" style="width: 100%;">

								<view class="justify-between flex">
									<view style="">
										<view class="text-lg text-bold">
											{{orderInfo.sysShopDeviceModel.title}}
										</view>
										<!-- 	<view class="text-df text-gray margin-top-xs">
										<text class=" ">{{orderInfo.sysOrgModel.orgName}}</text>
									</view> -->
										<!-- 	<view class="text-sm text-gray">
										<text class=" ">{{orderInfo.sysOrgModel.address}}</text>
									</view> -->
									</view>
									<view class="text-sm text-gray " style="width: 100rpx;">
										<view class="flex justify-end">
											{{orderInfo.status==0?'未支付':orderInfo.status==1?'预约成功':orderInfo.status==2?'已完成':orderInfo.status==3?'已取消':orderInfo.status==4?'消费中':'未知状态'}}

										</view>
										<view class="flex justify-end">
											{{orderInfo.priceStatus==0?'未支付':orderInfo.priceStatus==1?'已支付':orderInfo.priceStatus==2?'已退款':'未知状态'}}
										</view>
									</view>

								</view>

								<view>
									<text
										class="line-pink ">{{orderInfo.startTime+" 到  "+orderInfo.endTime.split(' ')[1]+"  "+orderInfo.hourNumber+"小时"}}</text>
								</view>


							</view>
						</view>

					</view>
				</view>
			</view>
			<view class="maoboli padding-sm margin-top-sm radius ">
				<view class="text-lg text-bold text-gray flex font-13 align-center">
					<view class="bg-pink round margin-right-xs " style="height: 24rpx;width: 24rpx;"></view>
					订单信息
				</view>
				<view class="margin-top-xs padding-xs">
					<view class="flex justify-between">
						<view class="text-gray">订单编号</view>
						<view class="text-gray">{{orderInfo.id}}</view>
					</view>
					<view class="flex justify-between">
						<view class="text-gray">下单时间</view>
						<view class="text-gray">{{orderInfo.createTime}}</view>
					</view>
					<view class="flex justify-between">
						<view class="text-gray">支付方式</view>
						<view class="text-gray">{{orderInfo.payType==0?'微信支付':'支付宝支付'}}</view>
					</view>
					<view class="flex justify-between">
						<view class="text-gray">支付时间</view>
						<view class="text-gray">{{orderInfo.payTime}}</view>
					</view>
					<view class="flex justify-between">
						<view class="text-gray">订单金额</view>
						<view class="text-gray">{{orderInfo.price}}</view>
					</view>
				</view>
			</view>
			<view style="width: 100%;" class="maoboli padding-sm margin-top-sm radius ">
				<view class="justify-end flex ">
					<!-- 未支付 -->
					<view v-if="orderInfo.status==0">
						<view class="text-gray text-center">订单暂时还没支付,无法进行任何操作</view>
					</view>
					<!-- 预约成功 -->
					<view v-if="orderInfo.status==1">
						<!-- <button class="cu-btn round line-red shadow orderbutton margin-right-sm">取消/退款</button> -->
						<button open-type="share"
							class="cu-btn round line-red shadow orderbutton margin-right-sm">分享</button>
						<button class="round  bg-pink  cu-btn orderbutton shadow " style="width: 200rpx;"
							@click="open(item)">开门</button>
					</view>
					<!-- 已完成 -->
					<view v-if="orderInfo.status==2">
						<button open-type="share" class="cu-btn round line-red shadow orderbutton">分享</button>
					</view>
					<!-- 取消成功 -->
					<view v-if="orderInfo.status==3">
						<!-- <button class="round  bg-pink  cu-btn orderbutton shadow">重新预约</button> -->
					</view>
					<!-- 消费中 -->
					<view v-if="orderInfo.status==4">

						<button open-type="share"
							class="cu-btn round line-red shadow orderbutton margin-right-sm">分享</button>
						<button class="round  bg-pink  cu-btn orderbutton shadow" style="width: 200rpx;"
							@click="open(item)">开门</button>
					</view>

				</view>
			</view>
			<openDoor ref="openDoor"></openDoor>
		</view>
	</view>
</template>

<script>
	import {
		getById
	} from "@/api/shop/userorder/SysUserOrderManagementApi.js"
	import storage from '@/utils/storage'
	export default {
		data() {
			return {
				dataShop: null,
				orderInfo: null,
				queryForm: {
					id: null,
				}
			}
		},
		onLoad(e) {
			this.queryForm.id = e.id
			this.getById()
		},
		methods: {

			/**
			 * 分享订单
			 */
			onShareAppMessage(e) {
				let shareobj = {
					title: '《房间已预定成功》位置:' + this.dataShop.address, //分享的标题
					path: '/pages/order/Info/Info?id=' + this.queryForm.id, //好友点击分享之后跳转的页面
					imageUrl: this.orderInfo.sysOrgModel.images.split(',')[0], //内容图片
				}
				return shareobj //一定要返回对象
			},

			async getById() {

				let {
					data
				} = await getById(this.queryForm)
				this.dataShop = data.sysOrgModel
				this.orderInfo = data
			},
			/**
			 * 打开设备
			 * @param {Object} data
			 */
			open(data) {

				//在此要判断下开大门还是开小门。
				this.$refs.openDoor.open(this.orderInfo)
			},

			cancelOrder() {
				uni.showModal({
					title: '提示',
					content: '确定要取消订单吗？',
					success: (res) => {
						if (res.confirm) {
							// 取消订单逻辑
						}
					}
				})
			},
		}
	}
</script>

<style>
	.order-info {
		padding: 20rpx;
	}

	.shop-info {
		background: #fff;
		padding: 20rpx;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
	}

	.shop-name {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.shop-address {
		font-size: 28rpx;
		color: #666;
	}

	.time-info {
		background: #fff;
		padding: 20rpx;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
	}

	.time-item {
		margin-bottom: 10rpx;
		font-size: 28rpx;
	}

	.action-buttons {
		display: flex;
		justify-content: space-around;
		padding: 20rpx 0;
	}

	.btn {
		background: #ff6145;
		color: #fff;
		font-size: 28rpx;
		padding: 20rpx 40rpx;
		border-radius: 40rpx;
		border: none;
	}

	.cancel-btn {
		background: #999;
	}
</style>